<template>
    <div class="device-list">
        <div
            v-for="item in maintaindevices"
            :key="item.maintainworkorderid"
            class="device-one">
            <div
                v-if="item.status === 'completed'"
                class="device-icon">
                <wp-icon
                    :name="iconType(item)"
                    :size="27" />
            </div>
            <div
                class="device-icon-uncheck"
                v-if="item.status === 'waitinspection'">{{ $t('wp-wei') }}</div>
            <div class="device-check-info">
                <div class="check-title">{{ item.manufacturecode ? item.devicename + '(' + item.manufacturecode + ')' : item.devicename }}</div>
                <div
                    class="check-result">
                    <check-result :pointinspectioncontents="item.pointinspectioncount" />
                </div>
            </div>
            <div
                class="device-check-opt"
                @click="toCheckContent(item)">
                <span
                    class="opt-text"
                    :style="{ color: isCheckObj[item.status].color}">{{ isCheckObj[item.status].text }}</span>
                <van-icon
                    name="arrow"
                    size="15"
                    color="#bbbbbb" />
            </div>
        </div>
    </div>
</template>
<script>
import { selfI18n } from '@/i18n/index';
import { useRouter } from 'vue-router';
import { reactive, toRefs } from 'vue';
import WpIcon from '@/components/_wp_components/WpIcon.vue';
import { maintainCheckStatus } from '@/consts/maintaincheck.consts';
import CheckResult from '@/components/maintenance_control/maintaincheckorder/CheckResult.vue';

export default {
    components: {
        WpIcon,
        CheckResult
    },
    props: {
        maintainworkorderid: String,
        maintaindevices: Array
    },
    setup (props, ctx) {
        const router = useRouter();
        const toCheckContent = (item) => {
            router.push({
                path: '/DeviceMaintainCheckDetail',
                query: {
                    manufacturecode: item.manufacturecode,
                    maintainworkorderid: props.maintainworkorderid
                }
            });
        };

        const state = reactive({
            isCheckObj: {
                waitinspection: {
                    text: selfI18n('wp-wei-dian-jian'),
                    color: '#E84026'
                },
                completed: {
                    text: selfI18n('wp-yi-dian-jian'),
                    color: '#000'
                }
            }
        });

        const checkResult = (item) => {
            if (item.pointinspectioncount.fault === 0 && item.pointinspectioncount.defect === 0 && item.pointinspectioncount.normal === 0) {
                return false;
            } else {
                return true;
            }
        };

        const iconType = (item) => {
            if (item.pointinspectioncount.fault > 0) {
                return maintainCheckStatus.fault.icon;
            }
            if (item.pointinspectioncount.defect > 0) {
                return maintainCheckStatus.defect.icon;
            }
            if (item.pointinspectioncount.normal > 0) {
                return maintainCheckStatus.normal.icon;
            }
        };

        return {
            ...toRefs(state),
            toCheckContent,
            iconType,
            checkResult
        };
    }
};
</script>
<style lang="scss" scoped>
.device-list {
    background-color: #fff;
    .device-one {
        padding: 14px 15px;
        display: flex;
        align-items: center;
        .device-icon-uncheck {
            width: 27px;
            height: 27px;
            line-height: 27px;
            text-align: center;
            background: #d9d9d9;
            border-radius: 50%;
            color: #fff;
            margin-right: 12px;
        }
        .device-icon {
            margin-right: 12px;
        }
        .device-check-info {
            flex: 1;
            width: 0;
            .check-title {
                font-size: 17px;
                margin-bottom: 9px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .check-result {
                font-size: 15px;
                span {
                    margin-right: 5px;
                }
                .normal {
                    color: #64BB5C;
                }
                .defect {
                    color: #F9A01E;
                }
                .fault {
                    color: #E84026;
                }
            }
        }
        .device-check-opt {
            font-size: 15px;
            min-width: 65px;
            margin-left: 12px;
            .opt-text {
                margin-right: 5px;
            }
        }
    }
}

</style>
